<template>
  <div class="bos">
      <Head title="美酒+咖啡">
<img src="../../../../../assets/5.png" alt="">
</Head>

<div class="bottom">
<div class="xiao"  >
<div class="left">
  {{ num }}.
</div>
<div class="zhong">
{{ list }}
</div>
</div> 
</div>
<router-view></router-view>
 </div>
</template>

<script>

import Head from "@/components/public/HeadPage.vue"
export default {
  data(){
    return{
       list:sessionStorage.getItem("coffeetitle"),
       num:sessionStorage.getItem("i")
    }
  },
  
  components:{
 Head
 },
}
</script>

<style scoped>
.box{
width: 100%;
height: 100%;
}
/* 图标区域 */
.top h3 img {
  width: 0.24rem;
  margin-right: 0.05rem;
}

.bottom{
width: 100%;
height: .35rem;
display: flex;
justify-content: center;

}

.xiao{
width: 100%;
margin-top: .05rem;
display: flex;
border-bottom: 2px solid #dad9df;


}
.xiao .left{
    width: 5%;
    height: .3rem;
    margin-left: .1rem;
    font-weight: 700;
    text-align: center;
    line-height: .3rem;
  }
  .zhong{
    width: 95%;
    height: 100%;
    line-height: .3rem;
    padding-left: 5px;
   font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  /* 内容区域 */
  .context{
      width: 100%;
      height: 6rem;
      display: flex;
    justify-content: center;
    background-color: #f0eff5;
  }
  .center{
  width: 98%;
  text-align: center;
  font-weight: 700;
  line-height: .35rem;

}
.xi{
width: 100%;
margin-top: .05rem;
display: flex;  
}
  .xi .yuan{
    width: 0.16rem;
  height: 0.16rem;
  margin-left: 0.1rem;
  font-weight: 700;
  text-align: center;
  line-height: .16rem;
  border-radius: 50%;
  margin-top: 0.05rem;
  border: 1px solid black;
  }

  /* 中间区域 */
  .xi .zho{

    height: 100%;
    line-height: .3rem;
    padding-left: 5px;
   font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
</style>